<template>
  <tm-translate
    v-if="showBody"
    @end="hide"
    ref="bodyani"
    :reverse="reani"
    :name="hidnAniName"
    :autoPlay="false"
  >
    <tm-sheet
      :height="props.height - props.padding[1] * 2"
      :color="props.color"
      :_class="_class"
      :_style="_style"
      :followTheme="props.followTheme"
      :dark="props.dark"
      :round="props.round"
      :shadow="props.shadow"
      :outlined="props.outlined"
      :border="props.border"
      :borderStyle="props.borderStyle"
      :borderDirection="props.borderDirection"
      :text="props.text"
      :transprent="props.transprent"
      :linear="props.linear"
      :linearDeep="props.linearDeep"
      :margin="props.margin"
      :padding="props.padding"
    >
      <view class="relative bdcld flex flex-row flex-row-top-start">
        <view
          style="width: 0px"
          class="flex flex-12 flex-row flex-row-top-start"
          :class="[closable ? 'pr-24 ' : '']"
        >
          <view
            v-for="(item, index) in list"
            :key="index"
            :class="[activeIndex == index ? 'flex-12 ' : ' flex-0 ']"
            class="flex flex-row flex-row-top-start anifun"
          >
            <tm-translate
              name="zoom"
              style="width: 100%"
              _class="flex-12 flex flex-row flex-row-top-start"
              v-if="activeIndex == index"
            >
              <view class="flex-12 flex flex-row flex-row-top-start">
                <view v-if="item['icon']" class="pr-32" :style="{ height: '36rpx' }">
                  <tm-icon :fontSize="32" :lineHeight="0" :name="item['icon']"></tm-icon>
                </view>
                <view style="width: 0px" class="flex-12 flex flex-col">
                  <view
                    v-if="item['title']"
                    class="flex flex-col flex-col-top-start "
                    :style="{ height: '36rpx' }"
                  >
                    <tm-text
                      @click="emits('click', $event)"
                      _class="text-size-m  text-overflow-1 text-weight-b"
                      :fontSize="30"
                      :lineHeight="0"
                      :label="item['title']"
                    ></tm-text>
                  </view>

                  <view v-if="item['content']" class="flex-12 overflow">
                    <tm-text
                      @click="emits('click', $event)"
                      :fontSize="26"
                      :_class="'text-overflow-' + props.maxLine"
                      :lineHeight="0"
                      :label="item['content']"
                    ></tm-text>
                    <tm-text
                      v-if="len > 1 && props.showDot"
                      _class="pt-24"
                      :label="`${activeIndex + 1}/${len}`"
                    >
                    </tm-text>
                  </view>
                </view>
              </view>
            </tm-translate>
          </view>
        </view>
        <slot name="right">
          <view v-if="closable" class="flex flex-row flex-row-top-end">
            <tm-icon
              @click="close"
              :fontSize="32"
              :lineHeight="0"
              name="tmicon-times-circle-fill"
            ></tm-icon>
          </view>
        </slot>
      </view>
    </tm-sheet>
  </tm-translate>
</template>

<script lang="ts" setup>
/**
 * 警告提示
 * @description 警告提示，属于静态页面中的消息提醒，主要用于页面提示性的说明，警醒用户。
 */

import tmSheet from "../tm-sheet/tm-sheet.vue";
import tmText from "../tm-text/tm-text.vue";
import tmIcon from "../tm-icon/tm-icon.vue";
import tmTranslate from "../tm-translate/tm-translate.vue";
import { custom_props } from "../../tool/lib/minxs";
import {
  computed,
  ref,
  onMounted,
  onUnmounted,
  PropType,
  ComponentInternalInstance,
  InjectionKey,
} from "vue";
const bodyani = ref<InstanceType<typeof tmTranslate> | null>(null);
const emits = defineEmits(["click"]);
const props = defineProps({
  ...custom_props,
  transprent: {
    type: [Boolean],
    default: false,
  },
  border: {
    type: [Number],
    default: 0,
  },
  round: {
    type: [Number],
    default: 2,
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [32, 12],
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [24, 24],
  },
  content: {
    type: [Array,Object] as PropType<Array<Tmui.tmAlert>|Tmui.tmAlert>,
    default: ():Array<Tmui.tmAlert> => [],
  },
  autoPlay: {
    type: Boolean,
    default: true,
  },
  //关闭窗体的动画
  hidnAniName: {
    type: String,
    default: "zoom",
  },
  //轮播间隙
  duration: {
    type: Number,
    default: 3000,
  },
  closable: {
    type: [Boolean, String],
    default: true,
  },
  //高度必填。
  height: {
    type: [Number],
    default: 160,
  },
  //内容最大显示几行，变成省略号
  maxLine: {
    type: [Number],
    default: 1,
  },
  showDot: {
    type: Boolean,
    default: false,
  },
});
const activeIndex = ref(0);
const showBody = ref(true);
let timeid: any = uni.$tm.u.getUid(5);
const reani = computed(() =>
  props.hidnAniName == "zoom" || props.hidnAniName == "fade" ? true : false
);
const list = computed(():Tmui.tmAlert[] => {
  if(!Array.isArray(props.content)){
    return [
      {
        content:props.content?.content??'',
        title:props.content?.title ?? "",
        icon:props.content?.icon ?? "",
      }
    ]
  }
  let c = props.content.map((el) => {
    el["content"] = el?.content ?? "";
    el["title"] = el?.title ?? "";
    el["icon"] = el?.icon ?? "";
    return el;
  });
  return c;
});
const len = computed(() => list.value.length);
onUnmounted(() => clearTimeout(timeid));
onMounted(() => {
  if (props.autoPlay) {
    play();
  }
});

function hide() {
  clearTimeout(timeid);
  showBody.value = false;
}

function play() {
  if (len.value < 1) return;
  clearTimeout(timeid);
  timeid = setTimeout(function () {
    next();
  }, props.duration);
}

function next() {
  clearTimeout(timeid);
  let index = activeIndex.value + 1;
  if (index == len.value) {
    index = 0;
  }
  activeIndex.value = index;
  play();
}

function close() {
  bodyani.value?.play();
  clearTimeout(timeid);
  timeid = setTimeout(function () {
    showBody.value = false;
  }, 301);
}
</script>
